<!--
 * new page
 * @author: YK
 * @since: 2023-12-01
 * index.vue
-->
<template>
  <el-popover
    placement="bottom"
    :width="400"
    trigger="click"
  >
  <template #default >
    <slot></slot>
  </template>
  <template #reference>
  <el-badge style="cursor:pointer ;" :value="value" :max="max" :is-dot="isDot">
    <component :is="`el-icon${toLine(icon)}`"></component>
  </el-badge>
</template>
  </el-popover>
</template>

<script setup lang="ts">
import { toLine } from "../../../utils";
withDefaults(
  defineProps<{
    icon: string;
    value: string | number;
    max: number;
    isDot: boolean; //是否显示小圆点
  }>(),
  {
    icon: "Bell",
    value: "",
    isDot: false,
  }
);
</script>

<style scoped lang="scss"></style>
